<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下的事件
				box1.onmousedown = function(event){
					event = event || window.event;
					//div的偏移量 鼠标.clientX - 元素.offsetLeft
					//div的偏移量 鼠标.clientY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft; 
					var ot = event.clientY - box1.offsetTop;
					
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left + "px" ;
						box1.style.top = top + "px" ;
						
					};
					
					document.onmouseup = function(){
						document.onmousemove = null;
						
						document.onmouseup = null;
					};
				};
			};
		</script>
	</head>
	<body>
		我是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>
